<!--
 * @Description:
 * @Version: 1.0
 * @Author: yxx
 * @Date: 2023-10-21 19:34:49
 * @LastEditors: yxx
 * @LastEditTime: 2024-12-09 10:44:52
-->
<template>
  <el-dialog v-model="dialogVisible" title="个人信息" width="400px" draggable>
    <div class="modifydiv">
      <el-form ref="userFormRef" :model="userForm" :rules="userRules">
        <el-form-item label="账号:">
          <div class="demo-form-inline-edit">
            <span>{{ user.account }}</span>
            <el-button type="primary" @click="onShowEdit" v-if="!showEdit">修改</el-button>
            <el-button type="primary" @click="onShowEdit" v-else>取消</el-button>
          </div>
        </el-form-item>
        <el-form-item label="所属角色:">
          <span>{{ formatUserName(roleList, user.roleId) }}</span>
        </el-form-item>
        <el-form-item label="姓名:" prop="name">
          <span v-if="!showEdit">{{ user.name }}</span>
          <el-input v-else class="userForm-width" placeholder="姓名" v-model="userForm.name"></el-input>
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <span v-if="!showEdit">{{ user.phone }}</span>
          <el-input v-else class="userForm-width" placeholder="手机号" v-model="userForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <span v-if="!showEdit">{{ user.email }}</span>
          <el-input v-else class="userForm-width" placeholder="邮箱" v-model="userForm.email"></el-input>
        </el-form-item>
        <el-form-item label="账号状态:">
          <span>{{ user.status === "0" ? "正常" : "停用" }}</span>
        </el-form-item>
        <el-form-item label="创建日期:">
          <span>{{ user.createTime }}</span>
        </el-form-item>
        <el-form-item label="最后登录时间:">
          <span>{{ user.loginDate }}</span>
        </el-form-item>
        <el-form-item label="" v-if="showEdit">
          <el-button @click="cancelBtn">取 消</el-button>
          <el-button type="primary" @click="confirmBtn(userFormRef)">确 定</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, watch } from "vue"
import { getRolePageListApi } from "@/api/modules/system"
import { useUserStore } from "@/stores/modules/user"
import { formatUserName } from "@/utils"
import { ElMessage } from "element-plus"
import { aloneAddUserApi } from "@/api/modules/system"
import mittBus from "@/utils/mittBus"
import type { ElForm } from "element-plus"
import { LoginRes } from "@/api/interface/login/response"

type FormInstance = InstanceType<typeof ElForm>

const userFormRef = ref<FormInstance>()
const userUser = useUserStore()
const showEdit = ref(false)
const user = computed(() => userUser.userInfo)
const dialogVisible = ref(false)
const roleList = ref<{ value: number; label: string }[]>([])
const userForm = ref<LoginRes.SysUser>({ name: "", phone: "", email: "" })
const userRules = {
  name: [{ required: true, message: "必填项", trigger: "blur" }],
  phone: [{ required: true, message: "必填项", trigger: "blur" }],
  email: [{ required: true, message: "必填项", trigger: "blur" }]
}
watch(
  dialogVisible,
  val => {
    mittBus.emit("showBorad", val)
  },
  { immediate: true }
)
onMounted(() => {
  getRoleList()
  userForm.value = {
    name: user.value.name,
    phone: user.value.phone,
    email: user.value.email
  }
})
/**取消弹出框 */
const cancelBtn = () => {
  dialogVisible.value = false
}
/**获取角色下拉 */
const getRoleList = () => {
  getRolePageListApi({ pageIndex: 1, pageSize: 10000 }).then(res => {
    res.data.result.forEach(e => {
      roleList.value.push({
        value: e.id,
        label: e.name
      })
    })
  })
}
/**确定新增 */
const confirmBtn = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate(async valid => {
    if (!valid) return
    const { data } = await aloneAddUserApi({ id: user.value.id, ...userForm.value })
    userUser.setUserInfo(data?.sysUser)
    ElMessage.success("修改成功")
  })
}
const openDialog = () => {
  dialogVisible.value = true
}
const onShowEdit = () => {
  showEdit.value = !showEdit.value
}
defineExpose({ openDialog })
</script>
<style lang="scss" scoped>
.modifydiv {
  width: 250px;
  height: auto;
  margin: 0 auto;
  .demo-form-inline-edit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
  }
}
</style>
